<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span><b>用户名</b>：{{username}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>当前级别</b>：{{this.userLevel | userLevelFilter}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>上级代理</b>：{{parentUsername}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>做单成功数</b>：{{successNum}}</span>
      </div>
      <div>
        <template>
          <el-table :data="tableData" border style="width: auto">
            <el-table-column prop="orderType" label="做单类型" width="auto">
            </el-table-column>
            <el-table-column prop="orderNum" label="总数" width="auto">
            </el-table-column>
            <!--<el-table-column prop="reserve" label="..">
            </el-table-column>-->
          </el-table>
        </template>
      </div>
    </el-card>
  </div>
</template>

<script>
  //这里可以导入其他文件，如：组件、工具js、第三方插件js、json文件、图片文件等
  //例如：import [组件名称] from [组件路径];

  export default {
    name: 'UserCenter',
    //import引入的组件需要注入到对象中才可以使用
    components: {},
    //父子组件传递数据
    props: {},
    data() {
      //这里存放数据
      return {
        userId: this.$store.getters.getUser.userId || '',
        userLevel: '',
        parentUsername: '',
        username: '',
        successNum: '',
        tableData: [{
          orderType: '',
          orderNum: '',
          reserve: '...'
        }],

      };
    },
    //计算属性，类似于data概念
    computed: {},
    //侦听器，监听data中的数据变化
    watch: {},
    //方法集合
    methods: {
      getUserDataList(){
        this.$http.get(`/v1/users/${this.userId}`)
        .then(res =>{
          // console.log(res);
          this.username = res.data.username
          this.successNum = res.data.successNum
          this.userLevel = res.data.level
          var arr = this.objToArr(res.data.successDetail);
          this.tableData = [...arr];
          this.parentUsername = res.data.parentUsername;
        })
        .catch(err =>{
          console.log(err);
        })
      },

      objToArr(obj){
        let arr=[];
        let arrObj=Object.entries(obj);
        arrObj.forEach(v =>{
          arr.push({ orderType:v[0], orderNum:v[1], reserve: '...' })
        })
        return arr;
      }
    },

    //生命周期 - 创建完成（可访问当前this实例）
    created() {
    },
    //生命周期 - 挂载完成（可访问DOM元素）
    mounted() {
      this.getUserDataList();
    },
    filters: {
      userLevelFilter(val){
        if (val===0){
          return '管理员';
        }else {
          return '普通用户';
        }
      }
    },
    //生命周期 - 创建之前
    beforeCreated() {
    },
    //生命周期 - 挂载之前
    beforeMount() {
    },
    //生命周期 - 创建之前
    beforeCreated() {
    },
    //生命周期 - 更新之前
    beforeUpdate() {
    },
    //生命周期 - 更新之后
    updated() {
    },
    //生命周期 - 销毁之前
    beforeDestroy() {
    },
    //生命周期 - 销毁完成
    destroyed() {
    },
    //如果页面有keep-alive缓存功能，这个函数a会触发
    activated() {
    },

  }

</script>

<style lang="scss" scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix {
    text-align: left;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
</style>
